<template>
	<view>
		<view>名字</view>
		<view class="tx_he" @click="goSetImg">
			<image class="tx" :src="user.toxianag" mode=""></image>
			<view class="right_bottom">
				<image src="@/static/Myimg/camera.png"></image>
			</view>
			<view>名字</view>
		</view>
		<ul class="mes_list">
			<li class="mes_item" @click="setName()">
				<view>名字</view>
				<view class="" style="margin-left: 150px;">
					<text class="content">{{user.title}}</text>
					<image src="@/static/Myimg/right.png" mode=""></image>
				</view>
			</li>
			<li class="mes_item" @click="setNum()">
				<view>小红书号</view>
				<view class="" style="margin-left: 100px;">
					<text class="content">{{user.xhsNum}}</text>
					<image src="@/static/Myimg/right.png" mode=""></image>
				</view>
			</li>
			<li class="mes_item jianjie" @click="setJianJie()">
				<view>简介</view>
				<view class="gai" style="margin-left: 130px;">
					<view class="content">{{user.jianjie}}</view>
					<image src="@/static/Myimg/right.png" mode=""></image>
				</view>
			</li>
			<li class="mes_item" @click="setSex()">
				<view>性别</view>
				<view class="" style="margin-left: 190px;">
					<text class="content">{{user.sex}}</text>
					<image src="@/static/Myimg/right.png" mode=""></image>
				</view>
			</li>
			<li class="mes_item" @click="setBirthday()">
				<view>生日</view>
				<view class="" style="margin-left: 190px;">
					<text class="slect_con">选择生日</text>
					<image src="@/static/Myimg/right.png" mode=""></image>
				</view>
			</li>
			<li class="mes_item" @click="setWork()">
				<view>职业</view>
				<view class="" style="margin-left: 190px;">
					<text class="slect_con">选择职业</text>
					<image src="@/static/Myimg/right.png" mode=""></image>
				</view>
			</li>
			<li class="mes_item" @click="setAddress">
				<view>地区</view>
				<view class="" style="margin-left: 130px;">
					<text class="slect_con">选择你所在的地区</text>
					<image src="@/static/Myimg/right.png" mode=""></image>
				</view>
			</li>
			<li class="mes_item" @click="setSchool">
				<view>学校</view>
				<view class="" style="margin-left: 190px;">
					<text class="slect_con">选择学校</text>
					<image src="@/static/Myimg/right.png" mode=""></image>
				</view>
			</li>
			<li class="mes_item jianjie" @click="setBackGround">
				<view style="margin-left: 6px;">背景</view>
				<view class="" style="margin-left: 190px;">
					<image style="width: 100rpx; height: 80rpx;  " :src="user.backgroundUrl" mode=""></image>
				</view>
				<image src="@/static/Myimg/right.png" style="margin-top: 10px;" mode=""></image>
			</li>
		</ul>
		<ul class="mes_list mes_list2">
			<li class="mes_item2">
				<view style="color: black; font-family:'微软雅黑' ;margin-left: 20px; margin-left: 30rpx;">更多消息<text
						style="font-size: 25rpx; color: rgb(167, 167, 167);">(仅自己可见)</text></view>
				<view class="" style="margin-left: 100px;">
				</view>
			</li>
			<li class="mes_item mes_item2" @click="setWear">
				<view class="item_left">我的穿搭信息</view>
				<view class="" style="">
					<text class="item_right" style="margin-left: 100px;">点此填写</text>
					<image src="@/static/Myimg/right.png" mode=""></image>
				</view>
			</li>
			<li class="mes_item mes_item2" @click="lookQR">
				<view class="item_left">二维码</view>
				<view class="erweima" style="">
					<image src="@/static/Myimg/QR -code.png" mode=""></image>
					<image src="@/static/Myimg/right.png" mode=""></image>
				</view>
			</li>
			<li class="mes_item mes_item2 " @click="lookGrade">
				<view class="item_left">成长等级</view>
				<view class="kunshu" style="">
					<text class="item_right" style="color: black;margin-left: 390rpx;">困困薯</text>
					<image src="@/static/Myimg/right.png" mode=""></image>
				</view>
			</li>
		</ul>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				user: {

				}
				// imgUrl:'',
				// title: "一向情深",
				// address: "山西",
				// xhs
				 //Num: 6387996113,	
				// jianjie:'请填写简介',
				// sex:'男',
				// birthday:'',
				// Work:'',
				// school:'',
				// backgroundUrl: '',
			}
		},
		methods: {
			//跳转修改头像
			goSetImg() {
				uni.navigateTo({
					url: "/pages/My/setImg/setImg?imgUrl=" + encodeURIComponent(this.user.toxianag)
				})
			},
			//跳转修改名字
			setName() {
				uni.navigateTo({
					url: "/pages/My/username"
				})
			},
			//跳转修改小红书号
			setNum() {
				uni.navigateTo({
					url: "/pages/My/synopsis"
				})
			},
			//修改简介
			setJianJie() {
				uni.navigateTo({
					url: "/pages/My/synopsis"
				})
			},
			//修改性别
			setSex() {
				uni.navigateTo({
					url: "/pages/My/synopsis"
				})
			},
			//修改职业
			setWork() {
				uni.navigateTo({
					url: "/pages/My/synopsis"
				})
			},
			//修改地址
			setAddress() {
				uni.navigateTo({
					url: "/pages/My/synopsis"
				})
			},

			//修改学校
			setSchool() {
				uni.navigateTo({
					url: "/pages/My/synopsis"
				})
			},
			//修改背景图
			setBackGround() {
				uni.navigateTo({
					url: "/pages/My/synopsis"
				})
			},
			//
			setWear() {
				uni.navigateTo({
					url: "/pages/My/synopsis"
				})
			},
			lookQR() {
				uni.navigateTo({
					url: "/pages/My/synopsis"
				})
			},
			lookGrade() {
				uni.navigateTo({
					url: "/pages/My/synopsis"
				})
			}

		},
		onLoad(e) {
			console.log(e);
			let userStr = decodeURIComponent(e.user);
			this.user = JSON.parse(userStr);
			console.log(this.user);
		},

	}
</script>
<style scoped>
	.tx {
		width: 200rpx;
		height: 200rpx;
		border-radius: 50%;

	}
	.gai{
		display: flex;
		align-items: center;
	}
	.tx_he {
		width: 300rpx;
		height: 300rpx;
		display: flex;
		margin-left: 270rpx;
		margin-top: 70rpx;

	}

	.right_bottom {
		width: 50rpx;
		height: 50rpx;
		border-radius: 50%;
		background-color: #000;
		z-index: 1;
		margin-top: 140rpx;
		margin-left: -45rpx;
	}

	.right_bottom image {
		width: 30rpx;
		height: 30rpx;
		margin-top: 10rpx;
		margin-left: 13rpx;
	}

	.mes_list {
		width: 90%;
		height: 1050rpx;
		background-color: white;
		list-style: none;
		padding: 0;
		display: flex;
		align-items: flex-start;
		flex-direction: column;
		margin: 0 auto;
	}

	.mes_item {
		width: 100%;
		height: 100rpx;
		/* border-bottom: 1rpx solid #000; */
		display: flex;
		justify-content: space-around;

	}

	.jianjie {
		flex: auto;
		height: 160rpx;
		padding-top: 30rpx;
	}

	.mes_item view {
		font-size: 30rpx;
		color: rgb(153, 153, 153);
		line-height: 100rpx;
		text-align: left;
		/* margin-left: -80rpx; */
	}

	.mes_item image {
		width: 30rpx;
		height: 30rpx;
		padding-top: 20rpx;
		vertical-align: sub;
		margin-right: 0;
	}

	.content {
		color: #000;
		margin-left: 90rpx;
		width: 100px;
		word-break: keep-all;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}



	.slect_con {
		color: rgb(153, 153, 153);
	}

	.mes_list2 {

		height: 380rpx;

	}

	.mes_item2 {
		color: black;
		font-size: 30rpx;
		letter-spacing: 0.1em;
		margin-top: 10rpx;
	}

	.mes_item2 .item_left {
		font-size: 30rpx;
		color: rgb(153, 153, 153);
		line-height: 100rpx;
		text-align: left;
		margin-left: -5rpx;
	}

	.item_right {
		font-size: 30rpx;
	}

	.mes_item2 image {
		width: 30rpx;
		height: 30rpx;
		margin-top: -10rpx;
	}

	.erweima {
		margin-left: 379rpx;
		box-sizing: border-box;
	}

	.kunshu {
		margin-left: -80rpx;
	}
</style>